<template>
  <div id="app">

    <el-container style="font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;">

      <transition name="zoom-fade">
        
        <div v-if="show" class="box">
          <h3>
            <i class="iconfont icon-yueliang" ></i>
            冰轮网盘智能操作平台</h3>
        </div>
      </transition>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo " mode="horizontal" >
          <el-menu-item index="1" style="margin-left: 21px" >
            <i class="iconfont icon-yueliang"   ></i>
            <span  style="font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 15px;" > 冰轮 </span>
          </el-menu-item>
          <el-menu-item index="2" class="font-set" style="font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;margin-left: 10px;" >
            <i class="iconfont icon-shouye1 " ></i>
            首页
          </el-menu-item>
          <el-menu-item index="3"  style="font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;margin-left: 10px;" >
            <i class="iconfont icon-wangpan"  ></i>
            网盘</el-menu-item>
          <el-menu-item index="4" style="font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;margin-left: 10px;" >
            <i class="iconfont icon-xiaoxi"  ></i>
            在线人数 {{onlineNum}} </el-menu-item>
          <el-menu-item index="5" style="float: right;font-family: Avenir, Helvetica, Arial, sans-serzif;font-size: 14px;margin-left: 10px;"   >
            <el-button size="mini"  class="iconfont icon-icon-1" @click="toLoginOut" > 退出 </el-button>
          </el-menu-item>
          <el-menu-item index="6"  style="float: right;"  >
            <el-dropdown>
            <div  v-show="isLogin" >
              <i class="iconfont icon-gerenzhongxin-copy-copy" ></i>
              <span class="font-set el-icon-arrow-down el-icon--right"  >个人中心</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  邮箱: {{this.userInfo.email}}
                </el-dropdown-item>
                <el-dropdown-item >
                  昵称: {{this.userInfo.username}}
                </el-dropdown-item>
                <el-dropdown-item >
                <div style="float: left;width: 150px;">
                  <el-progress :percentage="this.userInfo.capacity" :color="color"></el-progress>
                </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
             <div v-show="!isLogin" >
               <el-button size="mini"  class="iconfont icon-weidenglu" @click="toLogin" > 登录 </el-button>
             </div>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
        <transition name="zoom-slide-right">

          <div v-if="show" class="floating-panel">
            <div style="margin-bottom: 10px; font-family: Avenir, Helvetica, Arial, sans-serif; font-size: 16px;">
              操作指令输入窗口
            </div>
            <div style="margin-bottom: 10px; color: #606266; font-size: 12px;">
              指令格式:操作类型+条件+文件信息
              示例（删除以test开头的文件夹）
            </div>
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入操作指令(暂时只支持文件的删除和查询操作)..."
              v-model="commandContent"
              style="width: 100%; margin-bottom: 10px;"
              resize="none"
            >
            </el-input>
            <el-button type="primary" @click="executeCommand">执行</el-button>

          </div>
        </transition>
      </el-header>

      <el-container>

        <el-aside width="150px" style="background: #ffffff; height: 620px;border-right: 1px solid #666666;">
          <el-menu
              @open="handleOpen"
              @select="selectFileType"
              @close="handleClose"
              style="width: 150px;"
           >
            <el-submenu index="1"   >
              <template slot="title">
                <i class="iconfont icon-wodewenjian"></i>
                <span>我的文件</span>
              </template>
              <el-menu-item index="1-0"  style="width: 120px; padding-right:50%;" >
                <i class="iconfont icon-wenjianjia4" ></i>
                <span>文件夹</span>
              </el-menu-item>
              <el-menu-item index="1-1" style="width: 120px; padding-right:50%;" >
                <i class="iconfont icon-wendang1" ></i>
                <span>文档</span></el-menu-item>
              <el-menu-item index="1-2" style="width: 120px; padding-right:50%;" >
                <i class="iconfont icon-tupian1" ></i>
                <span>图片</span>
              </el-menu-item>
              <el-menu-item index="1-3" style="width: 120px; padding-right:50%;" >
                <i class="iconfont icon-shipin" ></i>
                <span>视频</span></el-menu-item>
              <el-menu-item index="1-4" style="width: 120px; padding-right:50%;" >
                <i class="iconfont icon-yinpin" ></i>
                <span>音频</span></el-menu-item>
            </el-submenu>
            <el-menu-item index="2" style="padding-right: 35px;"  >
              <i class="iconfont icon-RectangleCopy"></i>
              <span slot="title">回收站</span>
            </el-menu-item>
            <el-menu-item index="3" style="padding-right: 45px;" >
              <i class="iconfont icon-xiaoxi"></i>
<!--             智能操作 -->
              <span slot="title" @click="ControlCommandOpera" > {{ `${show?"平台关闭":"平台启动"}` }}  </span>
            </el-menu-item>
          </el-menu>

        </el-aside>
        <el-container>
          <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{path: '/home/file'}" >我的文件</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider style="margin: 12px 0" ></el-divider>
            <div style="width: 100%;height: 35px;" >
              <div  style="float: left;margin: 6px;"  >

              </div>
              <span    @click="backFolderStep"  class="feet-back" style="float: left;margin: 6px;font-size: 12px;cursor: pointer;" >返回</span>
              <el-divider  direction="vertical" style="margin: 6px"  ></el-divider>
              <span class="iconfont icon-shuaxin1"  style="float: left;margin: 6px;font-size: 16px;cursor: pointer "  @click="refreshFiles" >  </span>
              <el-divider  direction="vertical" style="margin: 6px"  ></el-divider>
              <div style="float: left;" >
                <el-button type="primary" size="mini" class="iconfont icon-shangchuan" @click="uploadDialogVisible = true" > 上传 </el-button>
                <el-button type="primary" size="mini" @click="newDir" > 新建文件夹 </el-button>
              </div>

              <div style="float: right;" >
              <el-autocomplete type="primary"  v-model="searchValue"
                        @select="handleSelect"
                        :fetch-suggestions="querySearch"
                        placeholder="搜索文件"
                        :trigger-on-focus="false"
                        size="mini"  clearable  >
                <el-select v-model="selectFlag" size="mini" slot="prepend" placeholder="请选择">
                  <el-option label="文件名"  value="1"></el-option>
                  <el-option label="文件路径" value="2"></el-option>
                </el-select>
                <i
                    class="el-icon-edit el-input__icon"
                    slot="suffix" >
                </i>
                <template slot-scope="{item}">
                  <span class="name">{{ item.fileName }}</span>
                </template>
              </el-autocomplete>
              </div>
            </div>
            <el-divider style="margin: 24px 0" ></el-divider>
            <FileLister :file-list="[]" ref="fileLister" ></FileLister>
          </el-main>
          <el-footer>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <el-dialog title="文件新建"  :visible.sync="dialogVisible"  width="30%" >
      <div>
        <el-input v-model="inputNewDirName"
                  placeholder="请输入文件夹名称"
                  style="width: 250px;" clearable > </el-input>
        <el-button @click="newReqDir" type="primary"  style="margin-left: 1px;" > 创建  </el-button>
      </div>
    </el-dialog>

    <el-dialog
        title="文件上传"
        :visible.sync="uploadDialogVisible"
        :headers="{
          path: uploadCurrentPath,
        }"
        width="30%"
        :modal="false"
        :append-to-body="true"
        @opened="rebindUploader"
        center>
      <div class="upload-content" id="upload-content">
        <el-upload
            class="upload-demo"
            drag
            action="#"
            :headers="{
              'path': uploadCurrentPath,
              'dev-moon-token':''
            }"
            :http-request="fileUploader"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            multiple>

          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>



<script >
import axios from '../request/http'
import FileLister from "@/components/FileLister.vue";
import {DEV_MOON_TOKEN} from "@/constant/ConStant";
import {commandHandle, getInlineNum, newDirApi, searchApi, userInfoApi} from "@/request/request";

export default {
  name:'HomeView',
  components: {FileLister},
  data(){
    return {
      uploadDialogVisible: false,
      searchValue:'',
      isLogin:false,
      activeIndex: '1',
      activeIndex2: '1',
      selectFlag: '1',
      filesTips:[], // 文件提醒
      show: false,
      commandContent:"",
      onlineNum:0,
      percentage:20,
      openIndex:true,
      searchPageNum:1,// 当前搜索模块对应的page页
      inputNewDirName:"",
      color:'',
      dialogVisible:false,
      uploadCurrentPath:'',
      userInfo:{
        email:'',
        capacity:0,
        username:''
      }
    }
  },
  mounted() {
    //
    this.handleOpen(1,1)
    // 获取用户的详情信息
    this.getLoginStatusAndUserInfo()

    this.getInlineNum()

  },
  methods: {
    createStateFilter(queryString) {

      return (state)=>{
           // console.log(JSON.stringify(state)+'-<./')
        return (state['fileName'].toLowerCase().includes(queryString.toLowerCase()))  ;
      }
    },

    /**
     * 获取用户在线人数
     */
    getInlineNum(){
      getInlineNum().then(e=>{
        this.onlineNum = e['data']['data']
      });
    },


    /**
     * 文件搜索
     * @param queryString
     * @param cb
     */
    querySearch(queryString, cb) {
      /**
       *
       **/
      let currentPageNum = this.searchPageNum
      searchApi({
        filePath:'',
        pageSize:7,
        selectFlag:this.selectFlag === '2',
        pageNum:currentPageNum,
        searchValue:this.searchValue
      }).then(e=>{
        if(e['data']['code'] === 200){
          this.filesTips = e['data']['data']['dataList']||[]
          let filesTips = this.filesTips;
          this.filesTips = this.searchValue ? filesTips.filter(this.createStateFilter(this.searchValue)) : filesTips;
          this.$refs.fileLister.fileDatas = this.filesTips
          cb(this.filesTips);
        }else{
          this.$message({
            type:'error',
            message:e['msg']
          })
        }
      })
    },

    /**
     * 操作指令处理请求
     */
    executeCommand(){
      let context = this.commandContent

      if(context.trim() === ''){
        this.$message({
          type:'info',
          message:'请重写输入命令，你未输入指令'
        })
        return
      }
      commandHandle({
        text: context
      }).then(e=>{
        // this.commandContent = ''

        console.log(e['data'])
        if(e['data']['code']==200){
          if(e['data']['data']['operaSign'] === 0){
            this.$refs.fileLister.fileDatas = e['data']['data']['res']
            this.$message({
              type:"指令操作",
              message: e['data']['data']['msg']
            })
          }
        }



      })
    },

    /**
     * 获取 userInfo信息
     */
    getLoginStatusAndUserInfo(){
       let item = localStorage.getItem(DEV_MOON_TOKEN);
       if(item!= null && item!= undefined){
         this.isLogin = true
       }
       this.getUserInfo()
    },



    /**
     *     创建 新文件夹
     */
    newDir(){
       this.dialogVisible = true
    },

    /**
     * 创建文件夹的操作
     */
    newReqDir(){
      let currentPath = this.$refs.fileLister.getCurrentDir()
      let dirName = currentPath+'/' +this.inputNewDirName;
      newDirApi({currentPath: dirName}).then( _ =>{
        this.dialogVisible = false;
        if(_['data']['code'] === 200){
          this.$message({
            type:'success',
            message:"文件夹创建成功"
          })
          this.inputNewDirName = ""
          this.refreshFiles()
        }else{
          this.$message({
            type:'info',
            message:"文件夹创建失败"
          })
        }

      })
    },
    /**
     * 上传打开
     */
    rebindUploader() {
       console.log('----打开---')
      this.uploadCurrentPath = this.$refs.fileLister.currentPath
    },

    /**
     * 上传成功回调
     */
    fileUploadSuccess(){
      this.refreshFiles()
    },
    /**
     * 上传失败回调
     */
    fileUploadError(){
      this.refreshFiles()
    },

   ControlCommandOpera(){
      this.show = !this.show;
      if(!this.show){
        this.commandContent = ""
      }
    },
    /**
     * 文件上传的具体处理逻辑
     */
    async fileUploader(file) {
      const formData = new FormData();
      formData.append('file', file.file);      // 文件对象
      formData.append('path', this.uploadCurrentPath);// 路径参数
      try {
        const response = await axios.post('/file/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            // 3. 可选：处理上传进度（需手动更新 el-upload 的进度条）
            const percent = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
            );
            file.onProgress({percent});  // 触发进度回调
          }
        })

        // 4. 上传成功回调（触发 el-upload 的 on-success）
        file.onSuccess(response.data);
      }catch (error){
        file.onError(error);
      }
    },

    /**
     * 文件目录的刷新操作
     */
    refreshFiles(){
      // 更新文件目录操作
      this.$refs.fileLister.getFileList2()
    },

    /**
     *  获取用户信息
     */
    getUserInfo(){
      userInfoApi({}).then(e=>{
        console.log("-----------------------------------")
        this.percentage = e['data']['capacity']
        this.userInfo = e['data']['data']
        console.log(this.userInfo)
      })
    },
    /**
     * 文件类型选择
     */
    selectFileType(e){
      console.log('------>')
      // 表示回收站的操作
      if(e==='2'){
        this.$refs.fileLister.getFilesByType(8)
        return
      }
      e= e.substr(2,2);
      console.log(e)
      console.log('------>')
      if(e===''){
        return
      }

      this.$refs.fileLister.getFilesByType(e)
    },

    enterFolderStep(){

    },

    backFolderStep(){
      this.$refs.fileLister.backNextFolder()
    },


    /**
     * 跳转登录页面
     */
    toLogin(){
      this.$router.push({path: '/login'})
    },

    toLoginOut(){
      localStorage.removeItem(DEV_MOON_TOKEN)
      this.toLogin()
    },

    handleSelect(item) {
      // let currentPageNum = this.$refs.fileLister.currentPage
      console.log("--search--");
      console.log(item);
      this.$refs.fileLister.fileDatas = [item]
      console.log("--search--");
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      return '1'
    },


    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    getFileNodes(){

    }
  }
}
</script>

<style lang="scss" scoped>

.zoom-fade-enter-active {
  animation: zoomIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.zoom-fade-leave-active {
  animation: zoomOut 0.3s ease;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.floating-panel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 500px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
}

/* 入场动画 */
.zoom-slide-right-enter-active {
  animation: zoomSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 离场动画 */
.zoom-slide-right-leave-active {
  animation: zoomSlideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomSlideIn {
  0% {
    opacity: 0;
    transform:
        translateX(100%)    /* 从右侧完全隐藏 */
        translateY(-50%)   /* 保持垂直居中 */
        scale(0.8);        /* 初始缩放 */
  }
  50% {
    opacity: 0.8;
    transform:
        translateX(-10%)   /* 稍微超过最终位置 */
        translateY(-50%)
        scale(1.05);       /* 轻微放大效果 */
  }
  100% {
    opacity: 1;
    transform:
        translateX(0)      /* 最终位置 */
        translateY(-50%)
        scale(1);          /* 恢复正常大小 */
  }
}

@keyframes zoomSlideOut {
  0% {
    opacity: 1;
    transform:
        translateX(0)
        translateY(-50%)
        scale(1);
  }
  100% {
    opacity: 0;
    transform:
        translateX(100%)
        translateY(-50%)
        scale(0.8);
  }
}

/* 性能优化 */
.floating-panel {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.container {
  position: relative;
  padding-top: 120px; /* 为动画留出空间 */
}

.box {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 10px;
  z-index: 500;
  width: 200px;
  height: 100px;
  background: rgb(223, 231, 237);
  color:  #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}


.slide-fade-enter-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateY(20px); /* Y轴位移 */
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px); /* 离场反向移动 */
}

/* 进入动画 */
.slide-down-enter-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-down-enter-from {
  transform: translate(-50%, -100%); /* X轴居中，Y轴上方 */
  opacity: 0;
}

/* 离开动画 */
.slide-down-leave-active {
  transition: all 0.3s ease-in;
}

.slide-down-leave-to {
  transform: translate(-50%, -100%);
  opacity: 0;
}

.feet-back:hover{
  color: #97bdef;
}

.icon-shangchuan{
  font-size: 12px;
}
.icon-zuoyoujiantou1{
  cursor: pointer;
}
.icon-zuoyoujiantou{
  cursor: pointer;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  color: #9a6e3a;
  vertical-align: middle;
  position: relative;
  float: left;
  margin: 6px;
  font-size: 16px;
  cursor: pointer;
}
.el-menu-item  {
  padding-left: 0;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 100px;
  min-width: 200px;
}
.font-set{
  font-family: Avenir, Helvetica, Arial, sans-serif ;font-size: 14px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  margin: 2px;
  min-height: 30px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-header, .el-footer {
  color: #333;
  text-align: center;
  line-height: 40px;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #f9fafc;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 45px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  //text-align: center;

}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}


</style>